{extend name="common/base_page" /}

{block name="title"}附件管理{/block}

{block name="jscssfile"}{/block}

{block name="css"}
<style type="text/css">
.layui-layer-prompt .layui-layer-content { padding-bottom:0; }
.layui-form-label { padding: 9px 8px; }
</style>
{/block}

{block name="body"}

<div class="layui-fluid" id="LAY-component-grid-all">
    <div class="layui-row layui-col-space10">
		<div class="layui-col-xs6 layui-col-sm7 layui-col-md2">
			<!-- 填充内容 -->
			<div class="layui-card">
				<div class="layui-card-header">
					分类
					<i class="layui-icon" lay-tips="新建分类" onclick="_setCate('add','新建分类');">&#xe654;</i>
				</div>
				<div class="layui-card-body attachment-body">
					<ul class="attachment-catelist">
					</ul>
				</div>
			</div>
		</div>
		<div class="layui-col-xs6 layui-col-sm5 layui-col-md10">
			<div class="layui-card">
				<div class="layui-card-body attachment-imgs-btnbox">
					<button class="layui-btn layui-btn-sm layui-btn-normal pc-upload-btn"><i class="layui-icon layui-icon-add-circle"></i> 上传</button>
					<button class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange"><i class="layui-icon layui-icon-cellphone"></i> 手机上传</button>
					<div class="attachment-imgs-right-btn">
						<button class="layui-btn layui-btn-danger layui-btn-sm" onclick="_useSelectProject();"><i class="layui-icon layui-icon-ok"></i> 使用已选中的项</button>
					</div>
				</div>
			</div>
			
			<div class="layui-card">
				<div class="layui-card-body attachment-pic-body">
					<ul class="attachment-imglist-box clearnfx">
						
					</ul>
				</div>
			</div>
			
			<div class="layui-card">
				<div class="layui-card-body" id="layer_page_box"></div>
			</div>
			
		</div>
    </div>
</div>

{/block}

{block name="script"}
<script type="text/html" id="tpl_edit_cate">
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">分类名称</label>
				<div class="layui-input-inline">
					<input type="text" id="cate_name" placeholder="输入分类名称" autocomplete="off" class="layui-input" maxlength="8"/>
				</div>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">显示排序</label>
				<div class="layui-input-inline">
					<input type="text" id="cate_sort" placeholder="数值越大越靠前显示" autocomplete="off" class="layui-input" maxlength="5"/>
				</div>
			</div>
		</div>
	</div>
</script>
<script src="__STATIC__/ajaxfileupload.js?v={$site.version}"></script>
<script type="text/javascript">
var _listCid = 0, _allowMultiple = parseInt('{$is_multiple}'), _imgList = new Array(), _p = 1;
$(function(){
	//PC上传绑定事件
	setBindUploadPic();
	//加载分类列表
	_loadCateList();
	//加载分类下的图片列表
	_loadCateAllPicture();
});
//分类点击事件
function _initCateListClick()
{
	_listCid = 0;
	$('.attachment-catelist li span').click(function(){
		var _tmpId = $(this).data('id');
		if(parseInt(_tmpId) != parseInt(_listCid))
		{
			_listCid = _tmpId;
			$(this).parents('li').siblings('li').removeClass('active');
			$(this).parents().addClass('active');
			$('.attachment-imglist-box').empty();
			//加载分类下的图片列表
			_loadCateAllPicture();
		}
	});
}
//分类信息设置-添加+修改
function _setCate(_type,_title,_name,_sort,_id)
{
	event.stopPropagation();
	_name = _name || '';
	_sort = _sort || '';
	_id = _id || '0';
	if(_type == 'edit' && (_name == '' || parseInt(_id) <= 0)) return false;
	layer.prompt({
		title: _title,
		formType: 2,
		shade: [0.4,'#000000'],
		area: ['350px', '230px'],
		success:function(i,layero){
			$('.layui-layer-input').val('JS1001');
			$('.layui-layer-input').hide();
			$('.layui-layer-content').append($('#tpl_edit_cate').html());
			$('#cate_name').val(_name);
			$('#cate_sort').val(_sort);
		}
	 }, function(text, index){
		var param = {id:_id,name:$.trim($('#cate_name').val()),sort:$.trim($('#cate_sort').val())};
		if(param.name == '' || param.name.length <= 0)
		{
			layer.msg('请输入分类名称', {time: 2000,anim: 4});
			return false;
		}
		_Index.ajax("{:url('index/index/set_attachment_cate')}",param,function(d){
			if(d.err == 0)
			{
				layer.close(index);
				layer.msg(d.msg, {time: 1000},function(){ _loadCateList(); });
			}else{
				layer.msg(d.msg, {time: 2000,anim: 4});
			}
		},'');
	});
}
//删除分类
function _delCate(_id)
{
	event.stopPropagation();
	_id = _id || '0';
	if(parseInt(_id) <= 0) return false;
	layer.confirm('您确定要将此分类删除吗？', {
	  title: '删除确认',btn: ['确定','取消'],shade: [0.4,'#000000']
	}, function(){
		layer.closeAll();
		_Index.ajax("{:url('index/index/del_attachment_cate')}",{id:_id},function(d){
			if(d.err == 0)
			{
				layer.msg(d.msg, {time: 1000},function(){ _loadCateList(); });
			}else{
				layer.msg(d.msg, {time: 2000,anim: 4});
			}
		},'');
	}, function(a,b){
	   layer.close(a);
	});
}
//加载分类列表
function _loadCateList()
{
	_Index.ajaxHide("{:url('index/index/load_attachment_cate_list')}",{},function(d){
		if(d.err == 0)
		{
			var _html = '<li class="active"><span data-id="0">所有资源</span></li>';
			$.each(d.list,function(i,v){
				_html += '<li>\
					<span data-id="' + v.id + '">' + v.name + '</span>\
					<div class="cate-btn">\
						<i class="layui-icon" lay-tips="编辑" onclick="_setCate(\'edit\',\'编辑分类\',\''+v.name+'\',\''+v.sort+'\',\''+v.id+'\');">&#xe642;</i>\
						<i class="layui-icon" lay-tips="删除" onclick="_delCate(\''+v.id+'\');">&#xe640;</i>\
					</div>\
				</li>';
			});
			$('.attachment-catelist').empty().append(_html);
			//分类点击事件
			_initCateListClick();
		}else{
			//分类点击事件
			_initCateListClick();
			layer.msg(d.msg, {time: 2000,anim: 4});
		}
	});
}
//加载分类下的图片列表
function _loadCateAllPicture()
{
	_Index.ajax("{:url('index/index/load_attachment_list')}",{page:_p,cateid:_listCid},function(d){
		if(d.err == 0)
		{
			var _html = '';
			$.each(d.list,function(i,v){
				_html += _buildImgOneHtml(v);
			});
			$('.attachment-imglist-box').empty().append(_html);
			//显示页码工具条
			_Index.setPagebar(_p,d.limit,d.total,function(v){
				_p = v;
				_loadCateAllPicture();
			});
			if(_allowMultiple > 0) //允许多选
			{
				_setAllowMultiple(); //设置多选
			}else{ //仅能单选
				_setAllowSelectOne(); //设置单选
			}
		}else{
			if(_p == 1) $('#layer_page_box').hide();
			layer.msg(d.msg, {time: 2000,anim: 4});
		}
	},'请稍候...');
}
//设置单选
function _setAllowSelectOne()
{
	$(".attachment-imglist-box").find("li").unbind("click").bind("click",function(){
		var _img = $.trim($(this).data('img'));
		$(this).siblings().children('div').removeClass('active');
		if($(this).children('div').hasClass('active'))
		{
			$(this).children('div').removeClass('active');
			_imgList = new Array();
		}else{
			$(this).children('div').addClass('active');
			_imgList[0] = _img;
		}
	});
}
//设置多选
function _setAllowMultiple()
{
	$(".attachment-imglist-box").find("li").unbind("click").bind("click",function(){
		if($(this).children('div').hasClass('active'))
		{
			$(this).children('div').removeClass('active');
		}else{
			$(this).children('div').addClass('active');
		}
		//设置选择的参数
		setSlectedLiImg();
	});
}
//设置选择的参数
function setSlectedLiImg()
{
	_imgList = new Array();
	//设置选择的参数
	var k = 0;
	$('.attachment-imglist-box li').each(function(t,va){
		var _img = $.trim($(this).data('img'));
		if($(this).children('div').hasClass('active'))
		{
			_imgList[k] = _img;
			k++;
		}
	});
}
//上传绑定事件
function setBindUploadPic()
{
    $('.pc-upload-btn').click(function(){
		var _imgHtml = '<input type="file" accept="image/*" name="img_file" id="img_more_file" class="ipt-file-hide">';
		if($('#img_more_file').length) $('#img_more_file').remove();
		$('body').append(_imgHtml);
		$('#img_more_file').on('change',function(b){
			if($(this).val() != '')
			{
				AjaxUploadFile({cate_id:_listCid,savedir:'attachment',inputname:$(this).attr('name'),imgid:$(this).attr('id')});
			}
		});
		$('#img_more_file').trigger('click');
    });
}
//多图上传-上传动作
function AjaxUploadFile(param)
{
	__showLoadingBox('上传中，请稍候...');
    $.ajaxFileUpload({
		url: "{:url('index/index/attachment')}", //用于文件上传的服务器端请求地址
		secureuri: false, //是否需要安全协议，一般设置为false
		fileElementId: param.imgid, //文件上传域的ID
		data:param, //要上传参数
		dataType:"json", //返回值类型 一般设置为json
		success: function(data)  //服务器成功响应处理函数
		{
			__hideLoadingBox();
			if(data.err == 0)
			{
				var _html = _buildImgOneHtml(data.sqlinfo);
				if($('.attachment-imglist-box li').length > 0)
				{
					$('.attachment-imglist-box li:first').before(_html);
				}else{
					$('.attachment-imglist-box').empty().append(_html);
				}
				if(_allowMultiple > 0) //允许多选
				{
					_setAllowMultiple(); //设置多选
				}else{ //仅能单选
					_setAllowSelectOne(); //设置单选
				}
			    //上传绑定事件--重新绑定
			    //setBindUploadPic();
				layer.msg(data.msg, {time: 1000});
			}else{
			    layer.msg(data.msg, {time: 2000,anim: 6});
			}
		},
		error: function (data, status, e)//服务器响应失败处理函数
		{
			__hideLoadingBox();
			layer.msg('上传出错：' + e, {time: 2000,anim: 6,shade:[0.4,'#000000']});
			return false;
		}
    });
}
//图片列表html
function _buildImgOneHtml(v)
{
    return '<li data-img="'+v.att_dir+'" id="li_img_'+v.id+'">\
		<div class="li-box">\
			<div class="img-box">\
				<img src="'+v.att_dir+'" onerror="__imgErr();"/>\
			</div>\
			<div class="img-option-btn">\
				<i class="layui-icon layui-icon-search layuiadmin-button-btn" lay-tips="查看" onclick="_viewBigImg(\''+encodeURIComponent(v.att_dir)+'\');"></i>\
				<div class="img-option-rigthbtn">\
					<i class="layui-icon" lay-tips="删除" onclick="_delOneImg(\''+v.id+'\');">&#xe640;</i>\
				</div>\
			</div>\
			<span class="img-type">'+v.image_type_txt+'</span\
		<div>\
	</li>';
}
//删除一个图片文件
function _delOneImg(_id)
{
	event.stopPropagation();
	_id = _id || '0';
	if(parseInt(_id) <= 0) return false;
	layer.confirm('您确定要将此文件删除吗？', {
	  title: '删除确认',btn: ['确定','取消'],shade: [0.4,'#000000']
	}, function(){
		layer.closeAll();
		_Index.ajax("{:url('index/index/del_attachment')}",{id:_id},function(d){
			if(d.err == 0)
			{
				$('#li_img_'+_id).remove();
				layer.msg(d.msg, {time: 1000},function(){ });
			}else{
				layer.msg(d.msg, {time: 2000,anim: 4});
			}
		},'');
	}, function(a,b){
	   layer.close(a);
	});
}
//查看文件
function _viewBigImg(_url)
{
	event.stopPropagation();
	_url = decodeURIComponent(_url);
	layer.open({
		type: 1,
		title:'查看文件',
		area: ['600px', '600px'],
		shade:[0.4,'#000000'],
		anim: 5,
		shadeClose: true,
		content: '<div style="width: 100%;height:100%;text-align: center;"><img src="'+_url+'" onerror="__imgErr();" style="width: 100%;height:auto;"/></div>'
	});
}
//转到 父窗口方法
function _useSelectProject()
{
	if(_imgList.length <= 0)
	{
		layer.msg('对不起，您未做任何选择', {time: 2000,anim: 4});
		return false;
	}
    if(typeof(window.parent.{$back_fun_name}) != 'function')
    {
		layer.alert('父页面缺少JS方法：{$back_fun_name}(objList)',{title:'错误',anim:4});
		return false;
    }
    var _objList = {};
	if(_allowMultiple > 0) //允许多选
	{
		_imgList.forEach((item,idx) => { 
			_objList[idx] = item.replace(/\\/g,"/");
		});
	}else{ //仅能单选
		var _objList = _imgList[0];
	}
	window.parent.{$back_fun_name}(_objList);
}
</script>
{/block}